<!--
 * @Author: your name
 * @Date: 2022-02-22 18:36:34
 * @LastEditTime: 2024-09-13 16:35:25
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \DTSWeekly_zhyq\src\Views\home\header\index.vue
-->
<!-- header -->
<template>
  <div>
    <div class="header"></div>
    <div class="left-bg">
      <div class="weather-box">
        <div class="bg-box"></div>
        <div class="weather-item">
          <div class="label">温度</div>
          <div class="value">26℃</div>
        </div>
        <div class="weather-item">
          <div class="label">湿度</div>
          <div class="value">37%</div>
        </div>
        <!-- <div class="weather-item">
          <div class="label">风向</div>
          <div class="value">north 3 th</div>
        </div> -->
      </div>
    </div>
    <div class="right-bg">
      <div class="info"></div>

      <div class="time">
        <span>
          {{ time }}
        </span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Dayjs from 'dayjs'
import { onMounted, onUnmounted, ref } from 'vue'
let timer = ref()
const date: any = ref('')
const time: any = ref('')

onMounted(async () => {
  get_Date_Time()

  timer.value = setInterval(() => {
    get_Date_Time()
  }, 1000)

  // BPFunction(1)
})
const get_Date_Time = () => {
  let date_time = Dayjs().format('YYYY-MM-DD/HH:mm:ss').split('/')
  date.value = date_time[0]
  time.value = date_time[1]
}
onUnmounted(() => {})
</script>
<style lang="scss" scoped>
.header {
  position: absolute;
  background: url('~@/assets/images/基础/header/top_middle_bg.png') no-repeat;
  background-size: 100% 100%;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 134px;
}
.left-bg {
  left: 0;

  display: flex;
  align-items: center;
  position: absolute;
  z-index: 11;
  .weather-box {
    padding-left: 103px;
    display: flex;
    padding-top: 24px;
    .bg-box {
      background: url('~@/assets/images/基础/header/103@2x.png') no-repeat;
      background-size: 100% 100%;
      width: 59px;
      height: 59px;
      margin-right: 54px;
    }
    .weather-item {
      margin-top: 6px;
      @include Padding(0, 58, 0, 52);
      border-left: 2px solid rgba(255, 255, 255, 0.4);
      height: 42px;
      .label {
        //@include LineHeight(23);
        position: relative;
        top: -1px;
        font-size: 20px;
      }
      .value {
        //@include LineHeight(23);
        position: relative;
        bottom: -8px;
        font-size: 20px;
      }
    }
  }
}
.right-bg {
  position: absolute;
  top: -10;
  z-index: 11;
  right: 120px;
  .time {
    position: absolute;
    height: 92px;

    right: 90px;
    font-size: 20px;
    font-family: SJyunhei;
    display: flex;
    justify-content: center;
    align-items: center;

    span:nth-of-type(1) {
      display: inline-block;
      margin-right: 10;
    }
  }
}
</style>
